<template>
  <div class="as-dropdown-menu"
       :class="[size?'as-dropdown-menu--'+size:'',position?'as-dropdown-menu--'+position:'']">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "AsDropdownMenu",
  data() {
    return {
      size: "",
      position: ""
    };
  },
  computed: {},
  mounted() {
    const _this = this;
    // function watchScroll() {
    //   let bodyHeight = 0;
    //   let parent = _this.$parent;
    //   _this.$nextTick(_ => {
    //     while (parent) {
    //       if (parent && parent.$options.componentName === "AsDropdown") {
    //         bodyHeight = window.innerHeight;

    //         parent = parent.$el;
    //         return;
    //       }
    //       parent = parent.$parent;
    //     }
    //   });

    //   window.onscroll = e => {
    //     console.log(e);

    //     // let top = document.documentElement.scrollTop;
    //     // let parentPosition = 0;
    //     // if (parent) {
    //     //   parentPosition = parent.getBoundingClientRect().top;
    //     // }

    //     // if (top - 200 > parentPosition) {
    //     //   _this.position = "top";
    //     //   console.log(1);
    //     // } else if (top + 300 < parentPosition) {
    //     //   _this.position = "bottom";
    //     //   console.log(2);
    //     // } else {
    //     //   _this.position = "";
    //     // }

    //     // if(top>parentPosition)
    //   };
    // }

    // watchScroll();

    // window.onresize = () => {
    //   watchScroll();
    // };
  }
};
</script>
